<template>
    <div class="classic-demo">
        <div class="author-demo">
            <div>作者：陈炼</div>
            <div>日期：2017/11/02</div>
        </div>
        <div class="zlst-classic-list">
            <z-list-up-down border-style="dashed">
                <div slot="zlst-list-up-left">京A F2356</div>
                <div slot="zlst-list-up-right"><z-tag color="green">维保中</z-tag></div>
                <div slot="zlst-list-down-left">维修厂：物流系统管理员</div>
                <div slot="zlst-list-down-right">时间：2017/02/12~2017/07/02</div>
            </z-list-up-down>
            <z-list-up-down >
                <div slot="zlst-list-up-left"><i class="iconfont icon-pandianqizi"></i>京A F2356</div>
                <div slot="zlst-list-up-right"><z-tag color="yellow">审批中</z-tag></div>
                <div slot="zlst-list-down-left">维修厂：物流系统管理员</div>
                <div slot="zlst-list-down-right">时间：2017/02/12~2017/07/02</div>
            </z-list-up-down>
        </div>
        <pre style="background-color: #ececec;">
            <code class="html" v-text="htmlCode">
            </code>
        </pre>
        <p style="color: #f00;">列表底部线条通过border-style属性可以设置实线（solid）或虚线(dashed），默认为虚线</p>
        <div class="zlst-classic-approve-list"  @click="itemClick(item)">
            <div class="view-logistics-listHead clearfix">
                <span>审批类型：承运商信息 </span>
                <div class="view-logistics-listTag">
                    <Tag> 草稿</Tag>
                </div>
            </div>
            <div class="view-logistics-listMiddle clearfix">
                <span><Icon type="model-s"></Icon></span>
                <span> 中国东部运输公司</span>
            </div>
            <div class="view-logistics-listFoot clearfix">
                <span>提交人：张三</span>
                <em>提交时间：2017-11-03 17:52</em>
            </div>
        </div>
        <div class="zlst-classic-approve-list"  @click="itemClick(item)">
            <div class="view-logistics-listHead clearfix">
                <span>审批类型：承运商信息 </span>
                <div class="view-logistics-listTag">
                    <Tag color="yellow"> 审核</Tag>
                </div>
            </div>
            <div class="view-logistics-listMiddle clearfix">
                <span><Icon type="model-s"></Icon></span>
                <span> 中国东部运输公司</span>
            </div>
            <div class="view-logistics-listFoot clearfix">
                <span>提交人：张三</span>
                <em>提交时间：2017-11-03 17:52</em>
            </div>
        </div>
        <div class="zlst-classic-approve-list"  @click="itemClick(item)">
            <div class="view-logistics-listHead clearfix">
                <span>审批类型：承运商信息 </span>
                <div class="view-logistics-listTag">
                    <Tag color="green"> 通过</Tag>
                </div>
            </div>
            <div class="view-logistics-listMiddle clearfix">
                <span><Icon type="model-s"></Icon></span>
                <span> 中国东部运输公司</span>
            </div>
            <div class="view-logistics-listFoot clearfix">
                <span>提交人：张三</span>
                <em>提交时间：2017-11-03 17:52</em>
            </div>
        </div>
        <div class="zlst-classic-approve-list"  @click="itemClick(item)">
            <div class="view-logistics-listHead clearfix">
                <span>审批类型：承运商信息 </span>
                <div class="view-logistics-listTag">
                    <Tag color="red"> 驳回</Tag>
                </div>
            </div>
            <div class="view-logistics-listMiddle clearfix">
                <span><Icon type="model-s"></Icon></span>
                <span> 中国东部运输公司</span>
            </div>
            <div class="view-logistics-listFoot clearfix">
                <span>提交人：张三</span>
                <em>提交时间：2017-11-03 17:52</em>
            </div>
        </div>
        <pre style="background-color: #ececec;">
            <code class="html" v-text="htmlCode2">
            </code>
        </pre>
</div>
</template>
<script>
    import hljs from 'highlight.js'
    export default {
        data () {
            return {
                htmlCode: '<div class="zlst-classic-list">\n' +
                '            <z-list-up-down border-style="dashed">\n' +
                '                <div slot="zlst-list-up-left">京A F2356</div>\n' +
                '                <div slot="zlst-list-up-right"><z-tag color="green">维保中</z-tag></div>\n' +
                '                <div slot="zlst-list-down-left">维修厂：物流系统管理员</div>\n' +
                '                <div slot="zlst-list-down-right">时间：2017/02/12~2017/07/02</div>\n' +
                '            </z-list-up-down>\n' +
                '            <z-list-up-down >\n' +
                '                <div slot="zlst-list-up-left"><i class="iconfont icon-pandianqizi"></i>京A F2356</div>\n' +
                '                <div slot="zlst-list-up-right"><z-tag color="yellow">审批中</z-tag></div>\n' +
                '                <div slot="zlst-list-down-left">维修厂：物流系统管理员</div>\n' +
                '                <div slot="zlst-list-down-right">时间：2017/02/12~2017/07/02</div>\n' +
                '            </z-list-up-down>\n' +
                '        </div>',
                htmlCode2:`<div class="zlst-classic-approve-list"  @click="itemClick(item)">
            <div class="view-logistics-listHead clearfix">
                <span>审批类型：承运商信息 </span>
                <div class="view-logistics-listTag">
                    <Tag> 草稿</Tag>
                </div>
            </div>
            <div class="view-logistics-listMiddle clearfix">
                <span><Icon type="model-s"></Icon></span>
                <span> 中国东部运输公司</span>
            </div>
            <div class="view-logistics-listFoot clearfix">
                <span>提交人：张三</span>
                <em>提交时间：2017-11-03 17:52</em>
            </div>
        </div>
        <div class="zlst-classic-approve-list"  @click="itemClick(item)">
            <div class="view-logistics-listHead clearfix">
                <span>审批类型：承运商信息 </span>
                <div class="view-logistics-listTag">
                    <Tag color="yellow"> 审核</Tag>
                </div>
            </div>
            <div class="view-logistics-listMiddle clearfix">
                <span><Icon type="model-s"></Icon></span>
                <span> 中国东部运输公司</span>
            </div>
            <div class="view-logistics-listFoot clearfix">
                <span>提交人：张三</span>
                <em>提交时间：2017-11-03 17:52</em>
            </div>
        </div>
        <div class="zlst-classic-approve-list"  @click="itemClick(item)">
            <div class="view-logistics-listHead clearfix">
                <span>审批类型：承运商信息 </span>
                <div class="view-logistics-listTag">
                    <Tag color="green"> 通过</Tag>
                </div>
            </div>
            <div class="view-logistics-listMiddle clearfix">
                <span><Icon type="model-s"></Icon></span>
                <span> 中国东部运输公司</span>
            </div>
            <div class="view-logistics-listFoot clearfix">
                <span>提交人：张三</span>
                <em>提交时间：2017-11-03 17:52</em>
            </div>
        </div>
        <div class="zlst-classic-approve-list"  @click="itemClick(item)">
            <div class="view-logistics-listHead clearfix">
                <span>审批类型：承运商信息 </span>
                <div class="view-logistics-listTag">
                    <Tag color="red"> 驳回</Tag>
                </div>
            </div>
            <div class="view-logistics-listMiddle clearfix">
                <span><Icon type="model-s"></Icon></span>
                <span> 中国东部运输公司</span>
            </div>
            <div class="view-logistics-listFoot clearfix">
                <span>提交人：张三</span>
                <em>提交时间：2017-11-03 17:52</em>
            </div>
        </div>`,
          }
      },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.classic-demo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>

